<template>
    <div>
        <div v-title>报价列表</div>
        <van-loading type="spinner" color="black" style="margin:54px auto" v-show="showLoading" />
        <div>
            <div style="width:100%;overflow:hidden;position:fixed;top:0">
                <van-tabs :active="active" @click="tabel">
                    <van-tab v-for="index in top" :key="index" :title="index">
                    </van-tab>
                </van-tabs>
            </div>
            <ul v-waterfall-lower="loadMores" waterfall-disabled="disabled" waterfall-offset="100" v-show="!showLoading">
                <div style="padding-top:54px">
                    <div class="main" v-for="item in dataslist">
                        <div class="top">
                            {{item.AddTime}}
                            <span style="float:right" @click="DelQuotes(item.ID)">
                                <i class="iconfont icon-bianjihuodongxiangqing-shanchu"></i>
                            </span>
                        </div>
                        <div class="content">
                            <div style="float:left;width:24%;margin-left:6%"><img :src="item.InsuranceLogo"></div>
                            <div style="floay:right;margin-top: 4%;color:#333333">
                                <div>保险公司：{{item.InsuranceName}}</div>
                                <div>车主姓名：{{item.CarOwner}}</div>
                                <div>号牌号码：{{item.PlateNumber}}</div>
                            </div>
                        </div>
                        <div class="bottom">
                            保单总额：
                            <span>￥{{item.OrderAmount}}</span>
                            <div class="lookfor" @click="lookfors(item.ID)">查看</div>
                        </div>
                    </div>
                </div>
            </ul>
            <ul v-waterfall-lower="loadMore" waterfall-disabled="disabled" waterfall-offset="100" v-show="!showLoading">
                <div>
                    <div class="main" v-for="item in datalist">
                        <div class="top">
                            {{item.AddQuoteTime}}
                            <span style="float:right" @click="DelQuote(item.ID)">
                                <i class="iconfont icon-bianjihuodongxiangqing-shanchu"></i>
                            </span>
                        </div>
                        <div class="content">
                            <div style="float:left;width:24%;margin-left:6%"><img :src="item.InsuranceLogo"></div>
                            <div style="floay:right;margin-top: 4%;color:#333333">
                                <div>保险公司：{{item.InsuranceName}}</div>
                                <div>车主姓名：{{item.TrueName}}</div>
                                <div>号牌号码：{{item.PlateNumber}}</div>
                            </div>
                        </div>
                        <div class="bottom">
                            保单总额：
                            <span>￥{{item.TotalAmount}}</span>
                            <div class="lookfor" @click="lookfor(item.ID)">查看</div>
                        </div>
                    </div>
                </div>
            </ul>
            <div class="nodata" v-show="showtime==0">
                <img src="../image/nodata.png">
            </div>
        </div>
    </div>
</template>
<script>
import api from '../fetch/api.js'
import {
    Toast,
    Dialog,
    Waterfall,
    Loading,
    Tabs,
    Tab,
} from 'vant';
export default {
    components: {
        [Toast.name]: Toast,
        [Dialog.name]: Dialog,
        [Loading.name]: Loading,
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
    },
    directives: {
        WaterfallLower: Waterfall('lower'),
    },
    data() {
        return {
            top: [ "商业险","交强险"],
            active: '单独保交强险',
            datalist: [],
            showLoading: true,
            pages: 1,
            showtime: 0,
            dataslist: [],
            showtimes: 0,
        }
    },
    mounted() {
        this.QGetListByPage()
        this.showtime = 1
    },
    methods: {
        tabel(index) {
            this.datalist = []
            this.dataslist = []
            if (index == 0) {
                this.QGetListByPage()
            } else {
                this.OGetListByPage()
            }
        },
        OGetListByPage() {
            api.OGetListByPage({ IsOrder: -1, IsQuote: -1 }).then(res => {
                setTimeout(() => {
                    this.dataslist = res.rows
                    if (res.total == 0) {
                        this.showtime = 0
                    } else {
                        this.showtime = 1
                    }
                    this.showLoading = false;
                }, 200)
            })
        },
        QGetListByPage() {
            api.QGetListByPage().then(res => {
                setTimeout(() => {
                    this.datalist = res.rows
                    if (res.total == 0) {
                        this.showtime = 0
                    } else {
                        this.showtime = 1
                    }
                    this.showLoading = false;
                }, 200)
            })
        },
        //单独交强险加载更多
        loadMores() {
            this.disabled = true;
            if (this.pages * 10 >= this.showtime) {
                // Toast({ message:'没有更多数据啦~', position: 'top' });
                this.disabled = false;
                return;
            }
            this.pages++;
            api.OGetListByPage({ rows: 10, page: this.pages, IsOrder: -1, IsQuote: -1 }).then(res => {
                setTimeout(() => {
                    for (var i = 0; i < res.rows.length; i++) {
                        this.datalist.push({
                            ID: res.rows[i].ID,
                            AddTime: res.rows[i].AddTime,
                            InsuranceLogo: res.rows[i].InsuranceLogo,
                            InsuranceName: res.rows[i].InsuranceName,
                            CarOwner: res.rows[i].CarOwner,
                            PlateNumber: res.rows[i].PlateNumber,
                            OrderAmount: res.rows[i].OrderAmount,
                        })
                    }
                });
                this.disabled = false;
            }, 200)
        },
        //加载更多
        loadMore() {
            this.disabled = true;
            if (this.pages * 10 >= this.showtime) {
                // Toast({ message:'没有更多数据啦~', position: 'top' });
                this.disabled = false;
                return;
            }
            this.pages++;
            api.QGetListByPage({ rows: 10, page: this.pages }).then(res => {
                setTimeout(() => {
                    for (var i = 0; i < res.rows.length; i++) {
                        this.datalist.push({
                            ID: res.rows[i].ID,
                            AddQuoteTime: res.rows[i].AddQuoteTime,
                            InsuranceLogo: res.rows[i].InsuranceLogo,
                            InsuranceName: res.rows[i].InsuranceName,
                            TrueName: res.rows[i].TrueName,
                            PlateNumber: res.rows[i].PlateNumber,
                            TotalAmount: res.rows[i].TotalAmount,
                        })
                    }
                });
                this.disabled = false;
            }, 200)
        },
        DelQuotes(p) {
            Dialog.confirm({
                message: '确认要删除这条报价吗？',
            }).then(() => {
                api.ODelQuote({ ID: p }).then(res => {
                    if (res.Success == true) {
                        Toast({ message: res.Msg, position: 'top' });
                    } else {
                        Toast({ message: res.Msg, position: 'top' });
                    }
                    this.dataslist = ''
                    this.pages = 1
                    this.OGetListByPage()
                })
            }).catch(() => {
                // on cancel
            });
        },
        DelQuote(p) {
            Dialog.confirm({
                message: '确认要删除这条报价吗？',
            }).then(() => {
                api.DelQuote({ ID: p }).then(res => {
                    if (res.Success == true) {
                        Toast({ message: res.Msg, position: 'top' });
                    } else {
                        Toast({ message: res.Msg, position: 'top' });
                    }
                    this.datalist = ''
                    this.pages = 1
                    this.QGetListByPage()
                })
            }).catch(() => {
                // on cancel
            });
        },
        lookfors(id) {
            api.OSetRead({ ID: id }).then(res => { })
            this.$router.push('/SingleOrder/' + id)
        },
        lookfor(id) {
            api.SetRead({ ID: id }).then(res => { })
            this.$router.push('/CarQuote/' + id)
        }
    },
}
</script>
<style src="../css/iconfont.css"></style>
<style>
.van-tab--active {
    color: #2491ff;
}

.van-tabs__nav-bar {
    background-color: #2491ff;
}
</style>

<style scoped>
.iconfont {
    color: #9f9f9f;
}

.main {
    width: 95%;
    margin: 0px auto;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
}

.top {
    height: 32px;
    line-height: 32px;
    color: #999999;
    font-size: 12px;
    width: 88%;
    margin: 0px auto;
    border-bottom: 1px solid #eeeeee;
}

.content {
    overflow: hidden;
}

.content img {
    width: 80%;
    margin: 20% auto;
}

.bottom {
    height: 40px;
    line-height: 40px;
    color: #999999;
    font-size: 12px;
    width: 88%;
    margin: 0px auto;
    border-top: 1px solid #eeeeee;
}

.bottom span {
    color: #f33e16;
    font-size: 14px;
    font-weight: bold;
}

.lookfor {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #2491ff;
    border: 1px solid #2491ff;
    width: 15%;
    border-radius: 5px;
    text-align: center;
    float: right;
    margin: 8px auto;
}

.nodata {
    text-align: center;
    padding: 50px;
    margin-top: 20vw;
}

.nodata img {
    width: 45%;
}
</style>
